<template>
  <div class="app-card-info">
    <div class="member-info">
      <span :class="'avatar '+$util.getColorByPersonName(user.name)">
        {{
          user.name.length > 1
            ? user.name.substring(user.name.length - 1, user.name.length)
            : user.name
        }}
      </span>
      <div class="member-info-content">
        <div class="card">
          <h1>
            <span class="name">{{ user.name }}</span>
            <span class="member-group">{{ user.srforgsectorname }}</span>
          </h1>

          <span class="email">{{ user.email ? user.email : '未填写邮箱' }}</span>
          <div style="margin-top:8px">
            <span v-if="!displayModel" @click="change" class="status">
              <i :class="working.length > 0 ? '' : 'el-icon-edit-outline'">
                <span>{{ working.length > 0 ? working : "填写工作签名" }}</span>
              </i>
            </span>
            <span v-else class="workstatus">
              <input
                ref="input"
                v-model="working"
                placeholder="你现在的工作状态？"
              />
              <i @click="change" class="el-icon-error"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  Model,
  Emit,
  Watch,
  Provide,
} from "vue-property-decorator";

import "./app-card-info.less";

@Component({})
export default class AppCardInfo extends Vue {
  /**
   * 用户信息
   *
   * @type {*}
   * @memberof AppCardInfo
   */
  public user: any = {
    name: "",
    avatar: null,
  };

  /**
   * 工作状态
   *
   * @type {string}
   * @memberof AppCardInfo
   */
  public working: string = "";

  /**
   * 工作状态样式切换
   *
   * @type {boolean}
   * @memberof AppCardInfo
   */
  public displayModel: boolean = false;

  /**
   * 工作状态样式改变
   *
   * @memberof AppCardInfo
   */
  public change() {
    this.displayModel = !this.displayModel;
    if (this.displayModel) {
      this.$nextTick(() => {
        let ref: any = this.$refs.input;
        ref.focus();
      });
    }
  }

  /**
   * vue生命周期
   *
   * @memberof AppCardInfo
   */
  public mounted() {
    let _user: any = {};
    if (this.$store.getters.getAppData()) {
      if (
        this.$store.getters.getAppData().context &&
        this.$store.getters.getAppData().context.srfusername
      ) {
        _user.name = this.$store.getters.getAppData().context.srfusername;
      }
      if (
        this.$store.getters.getAppData().context &&
        this.$store.getters.getAppData().context.srfusericonpath
      ) {
        _user.avatar = this.$store.getters.getAppData().context.srfusericonpath;
      }
      if (
        this.$store.getters.getAppData().context &&
        this.$store.getters.getAppData().context.srforgsectorname
      ) {
        _user.srforgsectorname = this.$store.getters.getAppData().context.srforgsectorname;
      }
      if (
        this.$store.getters.getAppData().context &&
        this.$store.getters.getAppData().context.email
      ) {
        _user.srforgid = this.$store.getters.getAppData().context.email;
      }
    }
    Object.assign(this.user, _user);
  }
}
</script>
